<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件总线</title>
</head>
<body>
    
    <input type="button" value="on Event">

    <script>
        // 事件总线
        class LTevent{
            constructor(){
                this.LTeventObj = {} // 保存所有的事件函数
            }
            on(eventName,callback){ // 判断如果那个函数没有，就创建一个数组，把函数放进去 反之就把函数放进去
                if(!this.LTeventObj[eventName]){
                    this.LTeventObj[eventName] = [];
                }
                this.LTeventObj[eventName].push(callback);
            }
            emit(eventName,...arg){ // 触发事件，把参数传给函数
                if(this.LTeventObj[eventName]){
                    this.LTeventObj[eventName].forEach(item=>{
                        item(arg);
                    })
                }
            }
            off(eventName,callback){ // 移除事件，把函数从数组中移除
                if(this.LTeventObj[eventName]){
                    this.LTeventObj[eventName] = this.LTeventObj[eventName].filter(item=>{
                        return item !== callback;
                    })
                }
            }
        }

        let button = document.querySelector('input');
        let eventBus = new LTevent();


        button.onclick = function(){

            eventBus.emit('navClick','LT',1.88,18)

            eventBus.on('navClick',function(...arg){
                console.log('navClick事件被触发了',...arg);
            })

        }


    </script>

</body>
</html>